<template>
  <div>
    <div style="height: 50px;">
      <!-- 中间 -->
      <div class="message">
        <el-radio></el-radio>我的联络任务
      </div>
      <!-- 当前展会 -->
      <div class="exhibition">当前展会:
        <el-text v-model="state.dataForm.exhsNameStr">{{ state.dataForm.exhsNameStr }} </el-text>
        <el-text class="mx-1" type="primary" style="padding-left: 16px;cursor: pointer;"
          @click="handlexhibition()">切换</el-text>
        <Sort
          style="width: 1em; height: 1em; margin-left: 10px;transform: rotate(270deg);color:#17B3A3;margin-bottom:-2px;margin-right: 12px;" />
      </div>
    </div>
    <!-- 新建联系任务 -->
    <el-form-item v-if="state.hasPermission('crm:crmtask:save')">
      <el-button type="primary" @click="addOrUpdateHandle()" :disabled="!isButtonEnabled">{{ $t("add") }}</el-button>
    </el-form-item>
    <!-- 我的联络任务 -->
    <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }" center
      v-loading="state.dataListLoading" :data="state.dataList" border
      @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column align="center" prop="id" label="ID" width="90" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="tskName" label="任务名称" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="creator" label="创建人" width="150" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="tskCreateTime" label="创建时间" width="220" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="totalCount" label="总数量" width="140" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="pendingCount" label="待处理数量" width="140"
        show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="skipCount" label="跳过同公司数量" width="140" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="finishRate" :label="finishRateLabel" width="120" show-overflow-tooltip>
        <template v-slot="{ row }">
          {{ row.finishRate != 0 ? row.finishRate + '%' : '0' }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="300"
        show-overflow-tooltip>
        <template v-slot="scope">
          <el-button :disabled="scope.row.pendingCount === 0 && state.hasPermission('crm:crmperson:contactCenter')"
            v-if="state.hasPermission('crm:crmperson:contactCenter')" type="primary"
            @click="enterCenter(scope.row.id, scope.row.tskName, state.dataForm.curExhId)">进入联络中心
          </el-button>
          <el-button v-if="state.hasPermission('crm:crmtask:update')" type="success"
            @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
          <el-button v-if="state.hasPermission('crm:crmtask:delete')" type="danger"
            @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 25, 50, 100]" :page-size="state.limit"
      :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="refreshDataList"></add-or-update>
    <!-- 当前展会 -->
    <power ref="exhibitionPowerRef" @refreshDataList="getInfo" @refreshexhibitionlist="state.getDataList"></power>
  </div>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, onMounted, reactive, ref, toRefs, } from "vue";
import AddOrUpdate from "./contact-tasks-add-or-update.vue";
import baseService from "@/service/baseService";
import power from "./current-exhibition-add.vue";
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const view = reactive({
  getDataListURL: '',
  getDataListIsPage: true,
  deleteURL: "/crm/crmtask",
  deleteIsBatch: true,
  dataForm: {
    id: "",
    exhsNameStr: "",
    curExhId: "",
    isNeedExhId: 1, // 传1根据当前展会过滤，传0不过滤
  },
  typeList: [1, 6, 7,3],
});

const init = () => {
  getInfo();
  getFinishRate()
};

/**
 * 跳转到呼叫中心页面
 */
const router = useRouter();
const enterCenter = (row: any, tskName: any, curExhId: any) => {
  router.push({
    path: "/expocube/call-center",
    query: {
      id: row,
      tskName: tskName,
      curExhId: state.dataForm.curExhId,

    }
  });
};

/**
 * 判断负责人
 */
const finishRateLabel = ref('我的完成率');

const getFinishRate =() => {
    baseService.post("/sys/user/getLeaderList", { typeList:state.typeList.join(), isUserNeedExhId: 1})
      finishRateLabel.value = '任务完成率';
};

/**
 * 获取当前登录用户信息，当前展会
 */
const getInfo = () => {
  return baseService.get("/sys/user/info").then((res) => {
    nextTick(() => {
      if (state.dataForm.exhsNameStr.split(',').length > 1) {
        isButtonEnabled.value = false;
        ElMessageBox({
          title: '提示',
          message: '当前页面只允许设置一个当前展会',
          type: 'warning',
          showCancelButton: false,
          closeOnClickModal: false,
          closeOnPressEscape: false,
          confirmButtonText: '确定', // 设置确定按钮文本为“确定”
          showClose: false // 取消右上角关闭按钮
        }).then(() => {
          nextTick(() => {
            exhibitionPowerRef.value.init();
          });
        });
      }
    })
    if (res.data.exhsNameStr == "" || res.data.exhsNameStr == "null" || res.data.exhsNameStr == null) {
      // 当前展会为空，禁用按钮
      isButtonEnabled.value = false;
      alert("请先设置当前展会");
      exhibitionPowerRef.value.init();
    } else {
      // 当前展会不为空，启用按钮
      isButtonEnabled.value = true;
      Object.assign(state.dataForm, res.data);
      // 新增判断，如果展会数量大于1，就不调用获取列表数据的接口
      if (state.dataForm.exhsNameStr.split(',').length <= 1) {
        state.getDataListURL = "/crm/crmtask/pageByUserId";
        state.getDataList();
      }
      if (res.data.userId === '1') {
          finishRateLabel.value = '任务完成率';
      }
    }
  });
};

const exhibitionPowerRef = ref();
const handlexhibition = (id?: number) => {
  nextTick(() => {
    exhibitionPowerRef.value.init(id);
  });
};

const isButtonEnabled = ref(true); // 新增按钮是否可用的标志

//新增
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id, state.dataForm.curExhId);
  });
};

const state = reactive({ ...useView(view), ...toRefs(view) });

//刷新数据
const refreshDataList = () => {
  state.refreshDataList();
};

//页面进入执行
init();



</script>

<style lang="scss" scoped>
.message {
  float: left;
  font-size: 16px;
  font-weight: 600;
}

.exhibition {
  font-size: 14px;
  float: right;
  padding-left: 20px;
  height: 35px;
  line-height: 35px;
  border-radius: 27px;
  background-color: rgba(247, 247, 247, 1);
}

.el-text {
  width: 200px;
  height: 200px;
  font-size: 14px;
}

.sort-icon {
  transform: rotate(180deg);
}

::v-deep .el-table .cell {
  white-space: nowrap;
}
</style>
